<template>
  <div class="container">
    <!-- 收货地址 -->
    <div class="cart-top">
      <div class="receive">
        <div class="name">收货人: {{address.username}}</div>
        <div class="phonen-number">{{address.telNumber}}</div>
      </div>
      <div class="address">收货地址: {{address.addr}}</div>

      <img src="../../../static/images/cart_border@2x.png" class="address-bar">
    </div>

     <!-- 购物车列表的头部 -->
    <div class="list-title">商品列表</div>

    <!-- 购物车列表 -->
    <div class="ware-list">
      <div class="ware-item" v-for="(item, index) in goods" :key="index">
        <div class="ware-content">
          <!-- 左侧的图片 -->
          <navigator class="ware-image" :url="'/pages/goods_detail/main?goods_id=' + item.goods_id">
            <image :src="item.goods_small_logo"/>
          </navigator>

          <!-- 右边的商品信息 -->
          <div class="ware-info">
            <navigator
              :url="'/pages/goods_detail/main?goods_id=' + item.goods_id"
              class="ware-title"
            >{{item.goods_name}}</navigator>
            <div class="ware-info-btm">
              <div class="ware-price">
                <span>￥</span>
                {{item.goods_price}}
              </div>

              <!-- 商品的数量 -->
              <div class="calculate">x {{item.num}}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- ware-list end -->

    <!-- 结算 -->
    <div class="cart-total">
      <!-- 合计价格 -->
      <div class="total-center">
        <div class="total-price">
          合计：<span class="colorRed">￥{{allPrice}}</span>
          </div>
        <div class="price-tips">包含运费</div>
      </div>

      <!-- 支付按钮 -->
      <div class="accounts" @tap="handleBuy">确认支付</div>
    </div>

  </div>
</template>

<script>
import request from "../../utils/request.js";
export default {
  data () {
    return {
      address:{},
      goods:[],
      order_number:""
    }
  },
  onShow(){
    // 从本地获取订单列表信息
    this.address = wx.getStorageSync("address") || {};
    this.goods = wx.getStorageSync("select_goods") || [];
  },
  onLoad(query){
    // 把订单编号存储到data
    this.order_number = query.order_number;
  },
  computed: {
    allPrice(){
      let price = 0;
      this.goods.forEach(item =>{
        price += item.goods_price * item.num;
      })
      return price;
    }
  },
  methods: {
    handleBuy(){
      // 请求支付接口
      request.auth(
        "https://itjustfun.cn/api/public/v1/my/orders/req_unifiedorder",
        {
          order_number: this.order_number
        }
      ).then(res => {
        const {wxorder} = res.data.data;
        // 发起微信支付
        wx.requestPayment(wxorder);
      });
    }
  }
}
</script>

<style scoped lang="scss">
@import "style.scss";
</style>
